import 'package:flutter/material.dart';
import '../models/user_model.dart';

class SkillTagWidget extends StatelessWidget {
  final SkillTag skill;
  final bool showLevel;
  final bool showCertified;
  final VoidCallback? onTap;

  const SkillTagWidget({
    super.key,
    required this.skill,
    this.showLevel = true,
    this.showCertified = true,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        decoration: BoxDecoration(
          color: _getSkillColor(skill.level),
          borderRadius: BorderRadius.circular(12),
          border: skill.isCertified && showCertified
              ? Border.all(color: Colors.amber, width: 1)
              : null,
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              skill.name,
              style: const TextStyle(
                color: Colors.white,
                fontSize: 12,
                fontWeight: FontWeight.w500,
              ),
            ),
            if (showLevel) ...[
              const SizedBox(width: 4),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(4),
                ),
                child: Text(
                  _getLevelText(skill.level),
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 10,
                  ),
                ),
              ),
            ],
            if (skill.isCertified && showCertified) ...[
              const SizedBox(width: 4),
              const Icon(
                Icons.verified,
                color: Colors.amber,
                size: 12,
              ),
            ],
          ],
        ),
      ),
    );
  }

  Color _getSkillColor(SkillLevel level) {
    switch (level) {
      case SkillLevel.beginner:
        return Colors.green;
      case SkillLevel.intermediate:
        return Colors.blue;
      case SkillLevel.advanced:
        return Colors.orange;
      case SkillLevel.expert:
        return Colors.red;
    }
  }

  String _getLevelText(SkillLevel level) {
    switch (level) {
      case SkillLevel.beginner:
        return '初级';
      case SkillLevel.intermediate:
        return '中级';
      case SkillLevel.advanced:
        return '高级';
      case SkillLevel.expert:
        return '专家';
    }
  }
}

class SkillTagsList extends StatelessWidget {
  final List<SkillTag> skills;
  final bool showLevel;
  final bool showCertified;
  final int maxTags;
  final VoidCallback? onTap;

  const SkillTagsList({
    super.key,
    required this.skills,
    this.showLevel = true,
    this.showCertified = true,
    this.maxTags = 3,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final displaySkills = skills.take(maxTags).toList();
    final hasMore = skills.length > maxTags;

    return Wrap(
      spacing: 6,
      runSpacing: 6,
      children: [
        ...displaySkills.map((skill) => SkillTagWidget(
              skill: skill,
              showLevel: showLevel,
              showCertified: showCertified,
              onTap: onTap,
            )),
        if (hasMore)
          GestureDetector(
            onTap: onTap,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.circular(12),
              ),
              child: Text(
                '+${skills.length - maxTags}',
                style: TextStyle(
                  color: Colors.grey[600],
                  fontSize: 12,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
      ],
    );
  }
}
